<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%> 
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>JSON Example</title>
<link rel="stylesheet" type="text/css" media="screen"
	href="./themes/base/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen"
	href="./css/ui.jqgrid.css" />
<script src="./js/jquery-1.9.0.min.js"></script>
<script src="./js/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
	
	$(function() {
		$("#list2").jqGrid({
			url : 'output_test.jsp',
			datatype : "json",
			colNames : [ 'RID', 'R_NAME', 'R_DESCRIPTION', ],
			colModel : [ {
				name : 'RID',
				index : 'RID',
				width : 55,
				editable : true,
				editoptions : {
					size : 10
				}
			}, {
				name : 'R_NAME',
				index : 'R_NAME',
				width : 100,
				editable : true,
				editoptions : {
					size : 10
				}
			}, {
				name : 'R_DESCRIPTION',
				index : 'R_DESCRIPTION',
				width : 250,
				editable : true,
				editoptions : {
					size : 25
				}
			}

			],
			rowNum : 10,
			rowList : [ 10, 20, 30 ],
			pager : '#pager2',
			sortname : 'RID',
			viewrecords : true,
			sortorder : "desc",
			loadtext : "Loading...",
			caption : "Navigator Example",
			editurl : "role_conn.jsp",
			height : "100%",
			
		});

		$('.loading').show();
		$('.loading').hide();

		jQuery("#list2").jqGrid(
				'navGrid',
				'#pager2',

				{
					edittext : "",
					edittitle : "Edit selected row",
					addtext : "",
					addtitle : "Add new row",
					deltext : "",
					deltitle : "Delete selected row",
					searchtext : "",
					searchtitle : "Find records",
					refreshtext : "",
					refreshtitle : "Reload Grid",
					alertcap : "Warning",
					alerttext : "Please, select row",
					viewtext : "",
					viewtitle : "View selected row"
				}, //options

				{
					editCaption : "Edit Record",
					bSubmit : "전송",
					bCancel : "취소",
					bClose : "Close",
					saveData : "Data has been changed! Save changes?",
					bYes : "Yes",
					bNo : "No",
					bExit : "Cancel",
					closeAfterEdit : true,
					reloadAfterSubmit : false
				}, // edit options

				{
					addCaption : "Add Record",
					bSubmit : "?�송",
					bCancel : "취소",
					clearAfterAdd : true,
					processData : "Processing...",
					height : 280,
					closeAfterAdd : true,
					reloadAfterSubmit : false
				}, // add options

				{
					caption : "Delete",
					msg : "Delete selected record(s)?",
					bSubmit : "전송",
					bCancel : "취소",
 				} // del options

// 				{
// 					caption : "Search...",
// 					Find : "Find",
// 					Reset : "Reset",
// 					odata : [ 'equal', 'not equal', 'less', 'less or equal',
// 							'greater', 'greater or equal', 'begins with',
// 							'does not begin with', 'is in', 'is not in',
// 							'ends with', 'does not end with', 'contains',
// 							'does not contain' ],
// 					groupOps : [ {
// 						op : "AND",
// 						text : "all"
// 					}, {
// 						op : "OR",
// 						text : "any"
// 					} ],
// 					matchText : " match",
// 					rulesText : " rules",
// 				} // search options
// 				{
// 					refresh : false,
// 					refreshstate : "firstpage",
// 					afterRefresh : 
// 						function () {
// 							refreshGrid();
// 							alert("확인");
// 				}
// 				}
				);  // refresh options
				
	});
</script>
<style type="text/css">

#total {
	position:absolute;
	width:1048px;
	height:739px;
	z-index:1;
	top: 3px;
	left: 5px;
}

#top {
	position:absolute;
	width:1024px;
	height:115px;
	z-index:2;
	left: 14px;
	top: 10px;
}
#menu {
	position:absolute;
	width:200px;
	height:510px;
	z-index:3;
	left: 25px;
	top: 148px;
}
#body {
	position:absolute;
	width:800px;
	height:510px;
	z-index:4;
	left: 242px;
	top: 149px;
}
#bottom {
	position:absolute;
	width:1024px;
	height:50px;
	z-index:5;
	left: 17px;
	top: 680px;
}

#inner {
	position:absolute;
	width:654px;
	height:375px;
	z-index:2;
	left: 64px;
	top: 71px;
}
</style>
<head>
</head>
<body>

<div id="total">


	<div id="top">
    	<c:import url="header.jsp" />
	</div>

  
<div id="body">
	<div id="inner">
		<table id="list2"></table>
    		<div id="pager2"></div>
           </div>
	</div>

    <div id="menu">
		<c:import url="side.jsp" />
	</div>

  <div id="bottom"><c:import url="footer.jsp" /></div>

</div>
